<template>
    <!-- 搜索框与添加开始 -->
    <div class="search">
        <span>项目状态:</span>
        <el-input class="input" @keyup.enter="searchHandler" v-model="searchInfo" size="large" placeholder="请输入要搜索的信息">
        </el-input>
        <el-button @click="searchHandler" class="button" size="large" type="primary" plain>搜索</el-button>
        <el-button @click="addProject" class="button" size="large" type="primary" plain>添加</el-button>
    </div>
    <!-- 搜索框与添加结束 -->

    <!-- 数据展示开始 -->
    <el-table :data="project.list" style="width: 100%" :header-cell-style="headerClass">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="number" label="编码" width="120" />
        <el-table-column prop="money" label="金额" width="120" />
        <el-table-column prop="address" label="地址" width="150" />
        <el-table-column prop="duration" label="工期" width="120" />
        <el-table-column prop="startTime" label="开始时间" width="150"
            :formatter="value => detaFormater(Number(value.startTime))" />
        <el-table-column prop="endTime" label="结束时间" width="150"
            :formatter="value => detaFormater(Number(value.endTime))" />
        <el-table-column prop="quantity" label="隧道数量" width="120" />
        <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
                <el-tag :type="scope.row.status === '1' ? '' : 'success'">{{ scope.row.status === '1' ? '已建成' : '施工中'
                }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="remark" label="备注">
            <template #default="scope">
                <div v-html="scope.row.remark"></div>
            </template>
        </el-table-column>
        <el-table-column width="135" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 数据展示结束 -->

    <!-- 分页开始-->
    <div class="page">
        <el-pagination background layout="prev, pager, next,jumper" :total="total" @current-change="changePage"
            @prev-click="prePage" @next-click="nextPage" :default-page-size="15" />
    </div>
    <!-- 分页结束 -->

    <!-- 搜索框添加开始 -->
    <el-dialog v-model="dialogAddVisible" title="添加项目信息" width="35%">
        <el-form :inline="true" :model="addProjectInfo">
            <el-form-item label="项目名称">
                <el-input v-model="addProjectInfo.name" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="项目编码">
                <el-input v-model="addProjectInfo.number" placeholder="请输入项目编码" />
            </el-form-item>
            <el-form-item label="项目金额">
                <el-input v-model="addProjectInfo.money" placeholder="请输入项目金额" />
            </el-form-item>
            <el-form-item label="项目地址">
                <el-input v-model="addProjectInfo.address" placeholder="请输入项目地址" />
            </el-form-item>
            <el-form-item label="项目工期">
                <el-input v-model="addProjectInfo.duration" placeholder="请输入项目工期" />
            </el-form-item>
            <el-form-item label="开工时间">
                <!-- <el-input v-model="addProjectInfo.startTime" placeholder="请输入开工时间"/> -->
                <el-date-picker v-model="addProjectInfo.startTime" type="date" placeholder="请输入开工时间" value-format="x" />
            </el-form-item>
            <el-form-item label="终止时间">
                <!-- <el-input v-model="addProjectInfo.endTime" placeholder="请输入终止时间" /> -->
                <el-date-picker v-model="addProjectInfo.endTime" type="date" placeholder="请输入终止时间" value-format="x" />
            </el-form-item>
            <el-form-item label="隧道数量">
                <el-input v-model="addProjectInfo.quantity" placeholder="请输入隧道数量" />
            </el-form-item>
            <el-form-item label="项目状态">
                <el-input v-model="addProjectInfo.status" placeholder="'1'-已完工   '0'-未完工" />
            </el-form-item>
            <el-form-item label="项目备注">
                <!-- <el-input v-model="addProjectInfo.remark" placeholder="请输入项目备注" /> -->
                <tinymce @onDataEvent="addProjectInfoRemark" :options="options"></tinymce>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureProjectInfo">
                    确定添加
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 搜索框添加结束 -->

    <!-- 编辑对话框开始 -->
    <!-- destroy-on-close关闭对话框时直接销毁对话框 -->
    <el-dialog v-model="dialogEditorVisible" title="编辑项目信息" width="35%" destroy-on-close>
        <el-form :inline="true" :model="editorProjectInfo">
            <el-form-item label="项目名称">
                <el-input v-model="editorProjectInfo.name"/>
            </el-form-item>
            <el-form-item label="项目编码">
                <el-input v-model="editorProjectInfo.number"/>
            </el-form-item>
            <el-form-item label="项目金额">
                <el-input v-model="editorProjectInfo.money"/>
            </el-form-item>
            <el-form-item label="项目地址">
                <el-input v-model="editorProjectInfo.address"/>
            </el-form-item>
            <el-form-item label="项目工期">
                <el-input v-model="editorProjectInfo.duration"/>
            </el-form-item>
            <el-form-item label="开工时间">
                <!-- <el-input v-model="addProjectInfo.startTime" placeholder="请输入开工时间"/> -->
                <el-date-picker v-model="editorProjectInfo.startTime" type="date"  value-format="x"/>
            </el-form-item>
            <el-form-item label="终止时间">
                <!-- <el-input v-model="addProjectInfo.endTime" placeholder="请输入终止时间" /> -->
                <el-date-picker v-model="editorProjectInfo.endTime" type="date"  value-format="x"/>
            </el-form-item>
            <el-form-item label="隧道数量">
                <el-input v-model="editorProjectInfo.quantity"/>
            </el-form-item>
            <el-form-item label="项目状态">
                <el-input v-model="editorProjectInfo.status"/>
            </el-form-item>
            <el-form-item label="项目备注">
                <!-- <el-input v-model="addProjectInfo.remark" placeholder="请输入项目备注" /> -->
                <tinymce @onDataEvent="editorProjectInfoRemark" :options="options" :remark="editorProjectInfo.remark" :editorID="editorID"></tinymce>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureProjectEditorInfo">
                    确定修改
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑对话框结束 -->
</template>

<style scoped>
.search {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    background: #fff;
}

.search span {
    font-weight: 700;
}

.search .input {
    width: 300px;
}

.page {
    position: fixed;
    right: 10px;
    bottom: 100px;
}
</style>

<script setup>
import api from '../../API/index';
import { onMounted, reactive, ref } from 'vue';
import { detaFormater } from '../../utils/utils'
import tinymce from '../../components/tinymce/index.vue'

const project = reactive({
    list: []
})
// 搜索初始化状态
const searchInfo = ref("")

// 初始化总条数
const total = ref(0)

// 点击搜索按钮
const searchHandler = () => {
    console.log(searchInfo.value)
    api.getSearch({ search: searchInfo.value }).then(res => {
        console.log(res.data);
        if (res.data.status === 200) {
            project.list = res.data.result
        } else {
            project.list = []
        }
    }).catch(error => {

    })
}

// 添加的显示与隐藏
const dialogAddVisible = ref(false)



// 搜索框的添加项目
const addProject = () => {
    dialogAddVisible.value = true
}

// 初始化添加表单 
const addProjectInfo = reactive({
    name: '',
    number: '',
    money: '',
    address: '',
    duration: '',
    startTime: '',
    endTime: '',
    quantity: '',
    status: '',
    remark: ''
})

// 初始化编辑表单
const editorProjectInfo = reactive({
    name: '',
    number: '',
    money: '',
    address: '',
    duration: '',
    startTime: '',
    endTime: '',
    quantity: '',
    status: '',
    remark: ''
})

// 确定添加项目信息
const sureProjectInfo = () => {
    console.log(addProjectInfo);
    api.getAddProjectInfo({
        name: addProjectInfo.name,
        number: addProjectInfo.number,
        money: addProjectInfo.money,
        address: addProjectInfo.address,
        duration: addProjectInfo.duration,
        startTime: addProjectInfo.startTime,
        endTime: addProjectInfo.endTime,
        quantity: addProjectInfo.quantity,
        status: addProjectInfo.status,
        remark: addProjectInfo.remark
    }).then(res => {
        console.log(res.data, '添加成功');
        if (res.data.status === 200) {
            dialogAddVisible.value = false;
            // 刷新页面
            http(1);
        } else {
            ElMessage.error(res.data.msg)
        }
    }).catch(error => {
        console.log('添加失败');

    })
}

// 定义富文本编辑器宽高
const options = {
    width: '100%',
    height: '300px'
}

// 获取富文本数据
const addProjectInfoRemark = (data) => {
    addProjectInfo.remark = data;
}

// 获取初始数据
onMounted(() => {
    http(1);
})

// 获取页面条数
onMounted(() => {
    api.getTotal().then(res => {
        console.log('总条数' + res.data);
        console.log(res.data);
        if (res.data.status === 200) {
            total.value = res.data.result[0]['count(*)']
        } else {
            total.value = 0
        }
    })
})

const http = (page) => {
    api.getProjectInfo({ page }).then(res => {
        console.log(res)
        if (res.data.status === 200) {
            project.list = res.data.result
        }
    }).catch(error => {
        console.log(error)
    })
}
/**
 * 设置表格头部样式
 */
const headerClass = () => {
    return {
        background: "#dcdcdc",
        color: "#999",
        fontWeight: 700
    }
}

// 编辑的搜索与隐藏
const dialogEditorVisible = ref(false)

/**
 * 表格 编辑按钮
 */
const editorID=ref(0)
const handleEdit = (index, row) => {
    dialogEditorVisible.value = true;
    editorID.value = row.id
    api.getPreProjectInfo({ id: row.id }).then(res => {
        if (res.data.status === 200) {
            editorProjectInfo.name = res.data.result.name
            editorProjectInfo.number = res.data.result.number
            editorProjectInfo.money = res.data.result.money
            editorProjectInfo.address = res.data.result.address
            editorProjectInfo.duration = res.data.result.duration
            // 修改事件日期格式
            editorProjectInfo.startTime = Number(res.data.result.startTime)
            editorProjectInfo.endTime = Number(res.data.result.endTime)
            editorProjectInfo.quantity = res.data.result.quantity
            editorProjectInfo.status = res.data.result.status
            editorProjectInfo.remark = res.data.result.remark
        } else {
            ElMessage.error(res.data.msg)
        }
    }).catch(error => {
        console.log(error);
    })
}

// 编辑里面修改富文本内容
const editorProjectInfoRemark=(data)=>{
    editorProjectInfo.remark=data;
}

// 确认编辑信息
const sureProjectEditorInfo = () => {
    api.getEditor(editorID.value,{
        name: editorProjectInfo.name,
        number: editorProjectInfo.number,
        money: editorProjectInfo.money,
        address: editorProjectInfo.address,
        duration: editorProjectInfo.duration,
        startTime: editorProjectInfo.startTime,
        endTime: editorProjectInfo.endTime,
        quantity: editorProjectInfo.quantity,
        status: editorProjectInfo.status,
        remark: editorProjectInfo.remark
    }).then(res=>{
        if(res.data.status === 200){
            dialogEditorVisible.value=false;
            http(1); 
        }else{
            ElMessage.error(res.data.msg)
        }

    })
}
/**
 * 表格 删除按钮
 */
const handleDelete = (index, row) => {
    ElMessageBox.confirm(
        '确定要删除当前数据么?',
        '删除数据',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 确定删除
            api.getDeleteProjectInfo({ id: row.id }).then(res => {
                if (res.data.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    // 刷新UI
                    http(1)
                } else {
                    ElMessage({
                        type: 'error',
                        message: res.data.msg,
                    })
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 分页开始
const changePage = (val) => {
    console.log('点击了某一页' + val);
    http(val);
}

const prePage = () => {
    console.log('点击了上一页');

}

const nextPage = () => {
    console.log('点击了下一页');

}

// 分页结束
</script>